@color_y:#FFD118;
@color_r:#FC3B3B;


//banner
.container {
    position: relative;
    width: 100%;
    background: url(../upload/home_wrap20181203.jpg) no-repeat center 0;
    z-index: 99;
    padding: 0;

    .box_top {
        height: 355px;
        width: 100%;
        // LOGO
        
        .logo_mxd {
            position: relative;
            img {
                position: absolute;
                left: 35px;
                top: 28px;
            }
        }
        // 导航栏
        .nav {
            position: absolute;
            left: 480px;
            top: 0px;
            z-index: 99;
            li {
                float: left;
                padding:25px;
                a {
                    color: #fff;
                    font-weight: 700;
                    font-size: 16px;
                }
            }
        }
        // 遮盖层
        .cloth1{
            position: relative;
            background: url(../img/nav_bg2.png);
            display: none;
            width: 100%;
            height: 355px;
            .download_li,.news_li,.info_li,.pay_li,.interaction_li,.service_li {
                position: absolute;
                left: 604px;
                top: 70px;
                li {
                    padding: 5px 0;
                    text-align: center;
                    a {
                        color: #fff;
                        font-size: 12px;
                    }
                    a:hover {
                        color: @color_r;
                    }
                }
            }
            .news_li {
                left: 742px;
            }
            .info_li {
                left: 854px;
            }
            .pay_li {
                left: 956px;
            }
            .interaction_li {
                left: 1084px; 
            }
            .service_li {
                left: 1196px; 
            }
        }
        }
    .box_bottom{
        position: relative;
        height: 310px;
        border: 4px solid #203983;
        background-color: #20293D;
        box-sizing: border-box;
        border-radius: 20px;
        .more_tab{
            width: 20px;
            height: 20px;
            position: absolute;
            right: 330px;
            top: 22px;
        }
        .box_l {
            float: left;
            position: relative;
            width: 280px;
            height: 100%;
            background: url(../img/mbtn_bg.png) no-repeat center;
            > .box_l_ul {
                position: absolute;
                left: 1px;
                top: 101px;
                width: 100%;
                height: 195px;
                #item1 a{
                    background: url(../img/qlink.png) no-repeat 0px 0px;
                }
                #item1 a:hover {
                    background: url(../img/qlink1_hover.png) no-repeat 0px 0px;
                }
                #item2 a{
                    background: url(../img/qlink.png) no-repeat 0px -32px;
                }
                #item2 a:hover {
                    background: url(../img/qlink2_hover.png) no-repeat 0px 0px;
                }
                #item3 a{
                    background: url(../img/qlink.png) no-repeat 0px -64px;
                }
                #item3 a:hover {
                    background: url(../img/qlink3_hover.png) no-repeat 0px 0px;
                }
                #item4 a{
                    background: url(../img/qlink.png) no-repeat 0px -96px;
                }
                #item4 a:hover {
                    background: url(../img/qlink4_hover.png) no-repeat 0px 0px;
                }
                #item5 a{
                    background: url(../img/qlink.png) no-repeat 0px -128px;
                }
                #item5 a:hover {
                    background: url(../img/qlink5_hover.png) no-repeat 0px 0px;
                }
                #item6 a{
                    background: url(../img/qlink.png) no-repeat 0px -160px;
                }
                #item6 a:hover {
                    background: url(../img/qlink6_hover.png) no-repeat 0px 0px;
                }
                li {
                    width: 206px;
                    height: 29px;
                    margin: 3px 0;
                    a {
                        display:block;
                        width: 100%;
                        height: 29px;
                        margin-left: 35px;
                    }
                }
                
                
            }
            .circle {
                background: url(../img/download_bg.png) no-repeat;
                position: absolute;
                left: 50%;
                margin-left: -106px;
                top: -104px;
                width: 100%;
                height: 100%;
                
                .mxd_download {
                    display: block;
                    background: url(../img/download_btn.png) no-repeat 0px 0px;
                    width: 200px;
                    height: 200px;
                }
            }
        }
        .box_m {
            float: left;
            .nav-tabs>li.active>a {
                border: 2px solid @color_y;
                border-bottom: 1px solid @color_y;
                color: @color_y;

            }
            .nav-tabs {
                border-bottom: none;
                margin-top: 16px;
                height: 32px;
                li {
                    width: 126px;
                    height: 100%;
                    background-color: #10141F;
                    margin-right: 12px;
                    text-align: center;
                    border: none;
                    border-radius: 5px 5px 0 0;


                    a {
                        padding: 0;
                        width: 100%;
                        height: 100%;
                        display: inline-block;
                        line-height: 30px;
                        background-color: #111621;
                        color: #8C9CA9;

                    }
                    
                    a:hover {
                        background-color: #20293D;

                    }
                }
                
            }
            .y_line {
                width: 98%;
                height: 2px;
                background-color: @color_y;
            }
            .tab-content {
                width: 600px;
                height: 275px;
                margin-top: 2px;
                .tab_one {
                    padding: 10px;
                    li {
                        margin-bottom: 7px;
                        font-size: 12px;
                        b {
                            font-weight: 400;
                            padding: 0 15px;
                            color: #FFAB00;
                        }
                        a {
                            font-weight: 700;
                        }
                        a:hover {
                            text-decoration: underline;
                        }
                        #tab_one_1,#tab_one_2,#tab_one_3,#tab_one_4,#tab_one_5,#tab_two_1,#tab_two_2,#tab_two_3,#tab_two_4,#tab_two_5,#tab_two_8,#tab_two_9,#tab_two_10,{
                            color: @color_r;
                        }
                        #tab_one_6,#tab_one_7,#tab_one_8,#tab_three_1,#tab_three_2,#tab_three_3,#tab_three_4,#tab_three_5,#tab_three_6,#tab_three_7,#tab_three_8,#tab_three_10{
                            color: @color_y;
                        }#tab_one_9,#tab_one_10,#tab_two_6,#tab_two_7,#tab_four_1,#tab_four_2,#tab_four_3,#tab_four_4,#tab_four_5,#tab_four_6,#tab_four_7,#tab_four_8,#tab_four_9,#tab_four_10,#tab_three_9{
                            color: #fff;
                        }
                        i { 
                            margin-right: 5px;
                            float: right;
                            font-style: normal;
                            color: #fff;
                        }
                    }

                }
            }
        }
        .box_r {
            float: right;
            .carousel {
                margin-top: 22px;
            }
        }
    }
}
//主体

.main {
    .main_l {
        float: left;
        .history {
            width: 254px;
            height: 214px;
            border: 1px solid #ccc;
            border-radius: 14px;
            box-sizing: content-box;
            select {
                margin-left: 38px;
                margin-top: 10px;
                border: 1px solid #ccc;
                color: #666;
                width: 175px;
                font-size: 13px;
            }
        }
        
        .services {
            width: 254px;
            height: 379px;
            border: 1px solid #ccc;
            border-radius: 14px;
            box-sizing: content-box;
            margin-top: 20px;
            .logo_services {
                margin-top: 10px;
                margin-left: 10px;
            }
            .dashed {
                width: 234px;
                height: 1px;
                border-top: 1px dashed #ccc;
                margin-top: 10px;
                margin-left: 10px;
            }
            .description_services {
                margin-top: 10px;
                margin-left: 30px;
                width: 200px;
                height: 170px;
                font-size: 12px;
                p {
                    margin: 7px 0;
                }
                a {
                    text-decoration: underline;
                }
                a:hover {
                    color: #FF6600;
                }
            }
            .services_link {
                li a {
                    margin-left: 20px;
                    display: inline-block;
                    width: 211px;
                    height: 25px;
                    background: url(../img/gameServicelink.png) no-repeat;
                }
                .services_link1 a:hover {
                    background: url(../img/gameServicelink1_hover.png) no-repeat;
                }
                .services_link2 a {
                    background-position:  0 -33px;
                }
                .services_link2 a:hover {
                    background: url(../img/gameServicelink2_hover.png) no-repeat;
                }
                .services_link3 a {
                    background-position:  0 -66px;
                }
                .services_link3 a:hover {
                    background: url(../img/gameServicelink3_hover.png) no-repeat;
                }
                .services_link4 a {
                    background-position:  0 -99px;
                }
                .services_link4 a:hover {
                    background: url(../img/gameServicelink5_hover.png) no-repeat;
                }
            }
            
        }
        .other_wx_wb {
            width: 254px;
            height: 220px;
            border: 1px solid #ccc;
            border-radius: 14px;
            box-sizing: content-box;  
            margin-top: 20px; 
            .other_wx_wb_up {
                font-size: 13px;
                .other_wx_wb_up_l {
                    float: left;
                    width: 127px;
                    height: 48px;
                    text-align: center;
                    background: url(../img/weixin-hd.png) no-repeat 0px 0px;
                    a {
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                        padding-top: 13px;
                        color: #fff;
                    }
                    
                    

                }
                .other_wx_wb_up_r {
                    float: right;
                    width: 127px;
                    height: 48px;
                    text-align: center;
                    background: url(../img/weixin-hd.png) no-repeat -126px 0px;
                    a {
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                        padding-top: 13px;
                        color: #999;
                    }
                    
                }
            }
            .other_wx_wb_down {
                margin-top: 55px;
                margin-left: 50px;
                width: 150px;
                height: 150px;
               background: url(../img/ewm1.jpg)
            }
        } 

    }
    .main_m {
        float: left;
        margin-left: 40px;
        .new_pro {
            width: 613px;
            height: 214px;
            border: 1px solid #ccc;
            border-radius: 14px;
            background: url(../img/shopping_bg.png) no-repeat;
            .new_pro {
                position: relative;
                width: 100%;
                height: 100%;
                .getmoney {
                    position: absolute;
                    right: 60px;
                    top: 8px;
                    width: 83px;
                    height: 23px;
                    background: url(../img/pay_btn.png);
                }
                .imgall {
                    overflow: hidden;
                    width: 85%;
                    margin: 0 auto;
                    margin-top: 50px;
                    .swiper_arrl {
                        position: absolute;
                        left: 16px;
                        top: 114px;
                        width: 27px;
                        height: 27px;
                        background: url(../img/arrow2.png);
                        z-index: 99999;
                    }
                    .swiper_arrr {
                        position: absolute;
                        left: 569px;
                        top: 114px;
                        width: 27px;
                        height: 27px;
                        background: url(../img/arrow2.png) top right;
                        z-index: 99999;
                    }
                    .swiper-container {
                        position: relative;
                        overflow: visible;
                        width: 130px;
                        height: 150px;
                        margin-left: 0;
                        .swiper-slide {
                            position: relative;
                            width: 110px!important;   
                            height: 150px;
                            margin: 0 10px;
                            background: url(../img/pic1_bg.png) no-repeat;
                            img {
                                margin-top: 12px;
                                margin-left: 7px;
                            }
                            .s1,.s2 {
                                font-size: 12px;
                                position: absolute;
                                left: 30px;
                                top: 115px;
                                z-index: 99999;
                                color: #000;
                            }
                            .bg1,.bg2 {
                                position: absolute;
                                top: 117px;
                                left: 13px;
                                display: inline-block;
                                width: 10px;
                                height: 11px;
                                background: url(../img/pic1-item1.png);
                            }
                            .bg2 {
                                top: 137px;
                                background: url(../img/pic1-item2.png);
                            }
                            .s1:hover,.s2:hover {
                                color:@color_r;
                            }
                            .s2 {
                                top: 135px;
                            }
                        }
                    } 
    
                }
            }
        }
        .banner_m {
            position: relative;
            width: 612px;
            height: 146px;
            border: 1px solid #ccc;
            border-radius: 14px;
            margin-top: 20px;
            box-sizing: content-box;
            li {
                position: absolute;
            }
            .m_current {
                display: block;
            }
        }
        .player_mxd {
            overflow: hidden;
            position: relative;
            width: 613px;
            height: 213px;
            background: url(../img/playWorld_bg.png);
            margin-top: 20px;
            .more_player {
                position: absolute;
                top: 12px;
                right: 17px;
                width: 18px;
                height: 18px;
            }
            .m_activity {
                width: 100%;
                height: 100%;
                font-size: 12px;
                margin-top: 45px;
                li {
                    margin: 3px 0;
                    b {
                        font-weight: 400;
                        color: #FF6600;
                        margin-left: 30px;
                    }
                    a {
                        margin-left: 10px;
                    }
                    a:hover {
                        color: #000;
                        text-decoration: underline;
                    }
                    i {
                        font-style: normal;
                        float: right;
                        margin-right: 30px;
                    }
                }
            }
        }
        .mxd_tv {
            position: relative;
            overflow: hidden;
            margin-top: 23px;
            width: 613px;
            height: 220px;
            background: url(../img/media_bg.png);
            .tvbox {
                width: 530px;
                height: 140px;
                margin: 0px auto;
                margin-top: 60px;
                border: 1px solid #ccc;
                border-radius: 14px;
                box-sizing: content-box;
                overflow: hidden;
                ul {
                    width: 1060px;
                    height: 140px;
                    // transform: translateX(-530px);
                    li {
                        float: left;
                    }
                }
                
            }
            .tv_l,.tv_r {
                position: absolute;
                left: 50px;
                top: 120px;
                width: 36px;
                height: 35px;
                cursor: pointer;
                background: url(../img/arrow.png) no-repeat;
            }
            .tv_r {
                left: 526px;
                background: url(../img/arrow.png) no-repeat right;
            }
        }
    }
    .main_r {
        float: right;
        margin-left: 20px;
        .help {
            width: 253px;
            a {
                position: relative;
                width: 100%;
                height: 100%;
                display: inline-block;
                overflow: hidden;
                em {
                    position: absolute;
                    left: 197px;
                    top: 36px;
                    width: 76px;
                    height: 76px;
                    background: url(../img/rlink_hover.png);
                }
            }
            a:hover em {
                transition: 0.3s left,0.3s top;
                left: 177px;
                top: 16px;
            }
            .kids,.word,.look {
                width: 253px;
                height: 92px;
                background: url(../img/rlink.png);
                margin-bottom: 19px;
            }
            .word {
                background-position: 0px 92px;
            }
            .look {
                background-position: 0px 185px;
            } 
        }
        .man {
            overflow: hidden;
            width: 254px;
            height: 280px;
            background: url(../img/master_bg.png);
            .border {
                position: relative;
                margin-top: 50px;
                margin-left: 20px;
                width: 216px;
                height: 130px;
                background: url(../img/master-pic-bg.png);
                img {
                    margin-top: 4px;
                    margin-left: 5px;
                    width: 206px;
                    height: 122px;
                }
                p {
                    font-size: 13px;
                    
                    margin-left: 50px;
                }
                .name_mxd {
                    margin-top: 10px;
                }
                .place {
                    margin-top: -8px;                    
                }
                .i1,.i2 {
                    position: absolute;
                    left: 32px;
                    bottom: -21px;
                    width: 11px;
                    height: 11px;
                    background: url(../img/master-icon.png);
                }
                .i2 {
                    bottom: -41px;
                }
            }
            .line_r {
                width: 220px;
                height: 1px;
                border-top: 1px dashed #ccc;
                margin-top: 50px;
                margin-left: 17px;
            }
            .join {
                display: inline-block;
                width: 211px;
                height: 25px;
                background: url(../img/master-btn.png);
                margin-top: 6px;
                margin-left: 23px;
            }
            .join:hover {
                background: url(../img/master-btn-hover.png);
                
            }
        }
        .gift {
            overflow: hidden;
            margin-top: 25px;
            width: 254px;
            height: 220px;
            background: url(../img/cooperation_bg.png);
            .white {
                position: relative;
                overflow: hidden;
                margin-top: 41px;
                margin-left: 10px;
                width: 231px;
                height: 169px;
                background-color: #fff;;
                border-radius: 14px;

                .gifts {
                    text-align: center;
                    line-height: 30px;
                    position: relative;
                    .l_17,.l_dw,.l_xl,.l_52 {
                        position: absolute;
                        left: 100px;
                        top: 10px;
                        display: inline-block;
                        width: 126px;
                        height: 30px;
                        background: url(../img/cooperation_btn.png);
                        color: #fff;
                        z-index: 999;
                    }
                    a:hover {
                        background-position: 0 bottom;
                    }
                    .l_dw {
                        top: 50px; 
                    }
                    .l_xl {
                        top: 90px; 
                    }
                    .l_52 {
                        top: 130px; 
                    }
                }
                .pkb {
                    position: absolute;
                    left: -77px;
                    top: 10px;
                    width: 174px;
                    height: 148px;
                    background: url(../upload/cooperation_icon.png)
                }
            }
            
        }
    }
}
